<!DOCTYPE html>
<html lang="en">
  <head>
		<?php include("view/head.php"); ?>
		<link type="text/css" rel="stylesheet" href="css/price-range-slider.css">
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  </head>
  <body>
	<?php include("view/main-menu.php"); ?>	
	<div class="main">
		<div class="row">
			<div class="col-md-5 stickleft">
				<iframe class="ggmap" src="https://mapsengine.google.com/map/u/0/embed?mid=zDwsXPjswDlU.kwwc-XGg4Y3A" width="100%" height="100%"></iframe>
			</div>
			<div class="col-md-7">
				<div class="row info topinfo">
      				<div class="col-sm-2 col-md-2">
       					<label>Trip</label>
      				</div>
         			<div class="col-sm-3 col-md-3">
           					 <input name="checkin" type="text" class="checkin ui-datepicker-target" placeholder="Check In">
          			</div>
			 		<div class="col-sm-3 col-md-3">
            			<input name="checkout" type="text" class="checkout ui-datepicker-target" placeholder="Check Out">
         		 	</div>
					<div class="col-sm-3 col-md-4">
              			<select name="guests" class="guest-select" data-prefill="1">
               		 		<option value="1">1 Guest</option>
							<option value="2">2 Guests</option>
							<option value="3">3 Guests</option>
							<option value="4">4 Guests</option>
							<option value="5">5 Guests</option>
							<option value="6">6 Guests</option>
							<option value="7">7 Guests</option>
							<option value="8">8 Guests</option>
							<option value="9">9 Guests</option>
							<option value="10">10 Guests</option>
							<option value="11">11 Guests</option>
							<option value="12">12 Guests</option>
							<option value="13">13 Guests</option>
							<option value="14">14 Guests</option>
							<option value="15">15 Guests</option>
							<option value="16">16+ Guests</option>
						</select>
         	 		</div>
    			</div>
    			<hr class="line"></hr>
    			<div class="row info">
    				<div class="col-sm-2 col-md-2">
         				<label>Room Type</label>
        			</div>
           			<div class="col-sm-3 col-md-3">
							<div class="col-sm-2 col-md-2 col-middle">
								<input type="checkbox" name="room-type" value="Entire home/apt">
							</div>
							<div class="col-sm-9 col-md-9 col-middle text-center">
								<i class="icon glyphicon-home h2"></i>
								<div class="infotype">Entire Place</div>
							</div>
							<div class="col-sm-1 col-md-1 col-middle">&nbsp;</div>
            		</div>

					<div class="col-sm-3 col-md-3">
							<div class="col-sm-2 col-md-2 col-middle">
								<input type="checkbox" name="room-type" value="Private room">
							</div>
							<div class="col-sm-9 col-md-9 col-middle text-center">
								<i class="icon glyphicon-lock h2"></i>
								<div class="infotype">Private Room</div>
							</div>
							<div class="col-sm-1 col-md-1 col-middle">&nbsp;</div>
					</div>

					<div class="col-sm-3 col-md-3">
							<div class="col-sm-2 col-md-2 col-middle">
								<input type="checkbox" name="room-type" value="Shared room">
							</div>
							<div class="col-sm-9 col-md-9 col-middle text-center">
								<i class="icon glyphicon-thumbs-up h2"></i>
								<div class="infotype">Shared Room</div>
							</div>
							<div class="col-sm-1 col-md-1 col-middle">&nbsp;</div>
					</div>
					<div class="col-sm-1 col-md-1 col-middle">
						<i class="icon glyphicon-question-sign" id="room-type-tooltip"></i>
					</div>
				</div>
				<hr class="line"></hr>
    			<div class="row info">
    				<div class="col-sm-2 col-md-2">
         				<label>Price range</label>
        			</div>
           			<div class="col-sm-9 col-md-9">
							 <div id="slider-range"></div>
							 <p>
								<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
							</p>
					</div>

					
					<div class="col-sm-1 col-md-1 col-middle">
						
					</div>
				</div>
				<hr class="line"></hr>
    			<div class="row info">
    				<div class="col-sm-8 col-md-8">
						<a class="btn2 btn-special" href="">More Filters</a> &nbsp <a class="btn2 btn-special" href="">Price</a>
        			</div>
           			<div class="col-sm-4 col-md-4">
							 <p>
								257 Rentals · Ho Chi Minh City
							</p>
					</div>
				</div>
				<hr class="line"></hr>
    			<div class="row info">
    				<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
					
        			</div>
           			<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="row info">
    				<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
					
        			</div>
           			<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="row info">
    				<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
					
        			</div>
           			<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="row info">
    				<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
					
        			</div>
           			<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="row info">
    				<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
					
        			</div>
           			<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="row info">
    				<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
					
        			</div>
           			<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="row info">
    				<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
					
        			</div>
           			<div class="col-sm-6 col-md-6">
						<div class="thumbnail">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel-inner">
									<div class="item active">
										<img src="images/111.jpg">
									</div>
									<div class="item">
										<img src="images/222.jpg">
									</div>
									<div class="item">
										<img src="images/333.jpg">
									</div>
								</div>
								<!-- Controls -->
								<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
									<span class="glyphicon glyphicon-chevron-left"></span>
								</a>
								<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
									<span class="glyphicon glyphicon-chevron-right"></span>
								</a>
							</div>
	
							<div class="caption">
							<div class="row">
								<div class="col-sm-3 col-md-3">
									<img src="images/user.jpg" width="50px"/>
								</div>
								<div class="col-sm-5 col-md-5">
									<a href="">Private Room District 3</a>
								</div>
								<div class="col-sm-4 col-md-4">
									$<a class="gia">12.500</a>
									per night
								</div>
							</div>
							</div>
						</div>
						
					</div>
				</div>
				
			</div>
		</div>
    </div>
	
	

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery-1.11.1.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="js/bootstrap.min.js"></script>
		<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
	<script>
  $(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 1000,
      max: 10000,
      values: [ 1000, 10000 ],
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  });
  </script>
  <script>
  	
$(window).scroll(function() {
    if (true) {
        $('.main-menu').addClass("f-nav");
        $('.ggmap').addClass("f-nav2");
        $('.topinfo').addClass("f-nav3");
        
    } else {
        $('.main-menu').removeClass("f-nav");
    }
});
  </script>
  </body>
</html>